<%@ page import="com.arvinclub.model.entity.Blog" %><%--
  Created by IntelliJ IDEA.
  User: arvin
  Date: 2019/7/12
  Time: 3:47 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="base.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <link rel="icon" type="images/x-icon" href="${ctx}file/images/favicon.ico">
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet" type="text/css"/>
    <title>${blog.user.name}-微博详情</title>
    <!-- Bootstrap core CSS -->
    <link href="${ctx}vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- Additional CSS Files -->
    <link rel="stylesheet" href="${ctx}assets/css/fontawesome.css" type="text/css"/>
    <link rel="stylesheet" href="${ctx}assets/css/templatemo-style.css" type="text/css"/>
    <link rel="stylesheet" href="${ctx}assets/css/owl.css" type="text/css"/>
    <link rel="stylesheet" href="${ctx}assets/css/lightbox.css" type="text/css"/>
    <style>
        .myclass:hover {
            color: #4f9bff;
        }

        .myclass {
            display: inline-block;
            color: #a43f49;
        }

        .section-heading {
            padding: 80px 0 45px 0
        }

        .myb1 {
            margin: 30px 0 0 15px;
        }

        .myb2 {
            margin: 30px 15px 0 0;
        }

        @media (max-width: 845px) {
            .section-heading {
                padding: 40px 0 45px 0;
            }

            section.contact-me {
                padding-bottom: 60px;
            }

            .myimg {
                margin: 0 auto;
                text-align: center;
            }

            .myb1 {
                margin: 30px 0 0 0;
            }

            .myb2 {
                margin: 30px 0 0 0;
            }
        }

        @media (min-width: 576px) {
            .container {
                max-width: unset;
            }
        }
    </style>

</head>

<body>
<div id="page-wraper" style="min-height: 100vh">
    <!-- Sidebar Menu -->
    <div class="responsive-nav">
        <i class="fa fa-bars" id="menu-toggle"></i>
        <div id="menu" class="menu">
            <i class="fa fa-times" id="menu-close"></i>
            <div class="container">

                <div class="author-content" style="margin: 80px 0 60px 0">
                    <h4 style="font-size: 40px">${sessionScope.user.name}</h4>
                    <c:choose>
                        <c:when test="${user.admin > 0}">
                            <p style="margin-top: 10px;cursor:pointer" onclick="javascript:window.open('${ctx}admin/manager.html')">管理员</p>
                        </c:when>
                        <c:otherwise>
                            <p style="margin-top: 10px">欢迎</p>
                        </c:otherwise>
                    </c:choose>                </div>
                <nav class="main-nav" role="navigation">
                    <ul class="main-menu">
                        <li><a href="${ctx}user/blogs.html">网站首页</a></li>
                        <li><a href="${ctx}user/attention.html">关注动态</a></li>
                        <li><a href="${ctx}user/page.html">我的主页</a></li>
                        <li><a href="${ctx}user/chat.html">在线聊天</a></li>
                        <li><a href="${ctx}user/search.html">查找内容</a></li>
                        <li><a href="${ctx}user/update.html">更新日志</a></li>
                        <li><a href="${ctx}user/exit">退出登录</a></li>
                    </ul>
                </nav>
                <div class="social-network">

                </div>
                <div class="copyright-text">
                    <p>Copyright &copy; 2019 Arvin<br>联系方式: <a
                            href="mailto:arvin5445@qq.com" target="_top">arvin5445@qq.com</a><br><a
                            href="http://beian.miit.gov.cn/" target="_blank">浙ICP备19031638号-1</a></p>
                </div>
            </div>
        </div>
    </div>
    <section class="section contact-me" data-section="section4" style="padding: 0">
        <div class="container" style="max-width: unset">
            <div class="section-heading">
                <h1 style="word-break: break-word">${blog.user.name}</h1>
                <div class="line-dec"></div>
                <span>微博详情</span>
            </div>
        </div>
    </section>

    <section class="section about-me" data-section="section1" style="border-bottom: none">
        <div class="container" style="max-width: unset">
            <div class="right-image-post">
                <div class="row">
                    <div class="col-md-6" style="flex: unset;
                max-width: unset;">
                        <div class="left-text">
                            <a style="word-break: break-word"
                               href="${ctx}user/<c:choose><c:when test="${blog.user.id == 4}">update.html</c:when><c:otherwise>page.html/${blog.user.id}</c:otherwise></c:choose>">

                                <h4 class="myclass">@<c:out value="${blog.user.name}"/></h4></a>
                            <%
                                String[] strings = ((Blog) request.getAttribute("blog")).getContent().split("\n");
                                pageContext.setAttribute("strings", strings);
                            %>
                            <div style="word-break: break-word;font-size: 18px;padding: 30px 15px 0 15px">
                                <c:forEach items="${pageScope.strings}" var="str">
                                    <c:out value="${str}"/><br>
                                </c:forEach><br>
                                <c:if test="${! empty blog.filenameList}">
                                    <div class="myimg">
                                        <c:forEach items="${blog.filenameList}" var="filename">
                                            <a href="${ctx}file/images/${filename}" target="_blank">
                                                <div style="background: url(${ctx}file/images/${filename}) no-repeat center center ;width: 200px;height: 200px;background-size: cover;display:inline-block;margin:15px"></div>
                                            </a>
                                        </c:forEach><br></div>
                                </c:if>
                                <br>
                            </div>
                            <span style="color: #666">---<c:out value="${blog.time}"/></span>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <form method="post" action="/user/addComment/${blog.id}">
                    <input id="text" type="text" name="content"
                           onkeydown="if(event.keyCode == 13){document.getElementById('form-submit').click();return false;}"
                           style="margin: 0 0 20px 0;
                            background-color: rgba(250,250,250,0.1);
                            border: 1px solid rgba(250,250,250,1);
                             width: 100%;
                       border-radius: 0px;
                       font-size: 18px;
                       line-height: 40px;
                       padding-left: 18px;
                       color: #fff;
"/>
                    <button id="form-submit" style="float: right" type="submit" class="button">评论</button>
                </form>
                <c:if test="${host}">
                    <button id="iii"
                            onclick="javascript:editBlog(${blog.id},'${content}')"
                            style="float: right;margin: 0 15px" class="button">编辑
                    </button>
                    <button id="iii"
                            onclick="javascript:if(confirm('确实要删除该内容吗?'))location='${ctx}user/delBlog/${blog.id}'"
                            style="float: right" class="button">删除
                    </button>
                </c:if>
                <c:choose>
                    <c:when test="${blog.commentList == null || fn:length(blog.commentList) == 0}">
                        <span style="margin-top: 35px;display: inline-block;color: #666">暂无评论</span>
                    </c:when>
                    <c:otherwise>
                        <c:forEach items="${blog.commentList}" var="comment">
                            <c:out value="${comment.user.name}"/>:<c:out value="${comment.content}"/>
                            <c:if test="${comment.user eq sessionScope.user}">
                                <a href="javascript:void(0)"
                                   onclick="javascript:editComment(${comment.id},'${comment.content}')">编辑</a>
                            </c:if>
                            <c:if test="${host || (comment.user eq sessionScope.user)}">
                                &nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)" onclick="javascript:if(confirm('确实要删除该内容吗?'))location='${ctx}user/delComment/${comment.id}'">删除</a>
                            </c:if>

                            <br>
                        </c:forEach>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>
    </section>


</div>
<script>
    function editComment(id, old) {
        var word = prompt("编辑内容", old);
        if (word) {
            post('${ctx}user/editComment', id, word);
        }
    }

    function editBlog(id, old) {
        var word = prompt("编辑内容", old);
        if (word) {
            post('${ctx}user/editBlog', id, word);
        }
    }

    console.log("感谢您帮我测试,如果发现BUG还请留言。");
    document.getElementById('text').focus();

    function post(URL, id, content) {
        var temp = document.createElement("form");
        temp.action = URL;
        temp.method = "post";
        temp.style.display = "none";

        var opt1 = document.createElement("textarea");
        opt1.name = "content";
        opt1.value = content;
        temp.appendChild(opt1);

        var opt2 = document.createElement("textarea");
        opt2.name = "id";
        opt2.value = id;
        temp.appendChild(opt2);

        document.body.appendChild(temp);
        temp.submit();
        return temp;
    }
</script>
<!-- Scripts -->
<!-- Bootstrap core JavaScript -->
<script src="${ctx}vendor/jquery/jquery.min.js" type="text/javascript"></script>
<script src="${ctx}vendor/bootstrap/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="${ctx}assets/js/isotope.min.js" type="text/javascript"></script>
<script src="${ctx}assets/js/owl-carousel.js" type="text/javascript"></script>
<script src="${ctx}assets/js/lightbox.js" type="text/javascript"></script>
<script src="${ctx}assets/js/custom.js" type="text/javascript"></script>

</body>
</html>


